@extends('app')
@section('content')
    <div class="jumbotron">
        <div class="container">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object img-circle avatar" style="width: 64px;height: 64px;" alt="64x64" src="{{ $discussion->user->avatar }}">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">{{ $discussion->title }}
                        @if(Auth::check() && Auth::user()->id==$discussion->user_id)
                        <a class="btn btn-lg btn-primary pull-right" href="/discussions/{{ $discussion->id }}/edit" role="button">修改帖子 &raquo;</a>
                        @endif
                    </h4>
                    <h5>
                        分类：
                        @foreach($discussion->categories as $category)
                            {{ $category->name }}
                        @endforeach

                        标签:
                        @foreach($discussion->tags as $tag)
                            {{ $tag->name }}
                        @endforeach
                    </h5>
                    {{ $discussion->user->name }}

                </div>
            </div>

        </div>
    </div>
<div class="container">
    <div class="row">
        <div class="col-md-9" role="main" id="post">
            <div class="blog-post">
                {!! $html !!}
            </div>
            <hr>
            @foreach($discussion->comments as $comment)
               <div class="media">
                   <div class="media-left">
                       <a href="#">
                           <img class="media-object img-circle" style="width:64px;height:64px" alt="64x64" src="{{ $comment->user->avatar }}">
                       </a>
                   </div>
                   <div class="media-body">
                       <h4 class="media-heading">{{ $comment->user->name }}</h4>
                       {{ $comment->body }}
                   </div>
               </div>
            @endforeach

            <div class="media" v-for="comment in comments">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object img-circle" style="width:64px;height:64px" alt="64x64" src="@{{ comment.avatar }}">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">@{{ comment.name }}</h4>
                    @{{ comment.body }}
                </div>
            </div>

            @if(Auth::check())
            <hr>
            {!! Form::open(['url'=>'/comment','v-on:submit'=>'onSubmitForm']) !!}
                    {!! Form::hidden('discussion_id',$discussion->id) !!}
            <!--- Body Field --->
            <div class="form-group">
                {!! Form::textarea('body', null, ['class' => 'form-control','v-model'=>'newComment.body']) !!}
            </div>
            {!! Form::submit('发表评论',['class'=>'btn btn-success pull-right']) !!}
            {!! Form::close() !!}
            @else
                <a href="/user/login" class="btn btn-block btn-success">登陆参与评论</a>
            @endif
        </div>
    </div>
</div>
    <script>
        Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
        new Vue({
            el:'#post',
            data:{
                comments:[],
                newComment:{
                    name:'{!! Auth::user()->name !!}',
                    avatar:'{{ Auth::user()->avatar }}',
                    body:''
                },
                newPost:{
                    discussion_id:'{{$discussion->id}}',
                    user_id:'{{Auth::user()->id}}',
                    body:''
                }
            },
            methods:{
                onSubmitForm:function (e){
                    e.preventDefault();
                    var comment = this.newComment;
                    var post = this.newPost;
                    post.body = comment.body;
                    this.$http.options.emulateJSON = true;
                    this.$http.post('/comment',post,[]).then(function (response) {
                        if(response.json().status==1)
                            this.comments.push(comment);
                    });
                    this.newComment = {
                        name:'{{ Auth::user()->name }}',
                        avatar:'{{ Auth::user()->avatar }}',
                        body:''
                    };
                }
            }
        });
    </script>
@stop